<template>
  <div>
    <div class="app-container">
      <div class="top" @click="cancelAdd">
        <div>
          <img src="../../assets/images/down.png" alt="返回" />
        </div>
        <div v-if="type == 'add'">新增备件入库</div>
        <div v-else>修改备件入库</div>
      </div>
      <div class="container">
        <!--   :class="{ 'center-steps': activeStep !== 0 }"
        :style="{ marginLeft: activeStep === 0 ? '60px' : '0px' }" -->
        <div class="steps-center-container">
          <div class="steps-container">
            <div class="step-bar">
              <!-- 步骤1 -->
              <div class="step-item">
                <div class="step-icon" :class="{
                  finished: activeStep >= 1,
                  active: activeStep === 0,
                }">
                  <i class="el-icon-check" v-if="activeStep >= 1"></i>
                  <span v-else>1</span>
                </div>
                <div class="step-text">
                  <div class="step-title">填写备件信息</div>
                  <div class="step-desc">填写入库明细</div>
                </div>
                <div class="step-line" :class="{ 'finished-line': activeStep >= 1 }"></div>
              </div>

              <!-- 步骤2 -->
              <div class="step-item">
                <div class="step-icon" :class="{
                  finished: activeStep >= 2,
                  active: activeStep === 1,
                }">
                  <i class="el-icon-check" v-if="activeStep >= 2"></i>
                  <span v-else>2</span>
                </div>
                <div class="step-text">
                  <div class="step-title">计算并预览</div>
                  <div class="step-desc">生成入库表单</div>
                </div>
                <div class="step-line" :class="{ 'finished-line': activeStep >= 2 }"></div>
              </div>

              <!-- 步骤3 -->
              <div class="step-item last">
                <div class="step-icon" :class="{ active: activeStep === 2 }">
                  <i class="el-icon-check" v-if="activeStep > 2"></i>
                  <span v-else>3</span>
                </div>
                <div class="step-text">
                  <div class="step-title">完成入库</div>
                  <div class="step-desc">新建成功</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 步骤1内容：表单（已修复居中问题） -->
        <div v-if="activeStep === 0" class="form-center-container offset-right" ref="step0Container">
          <!-- 新增居中容器 -->
          <div class="form-container-center">
            <el-form :model="forms" :rules="rules" ref="queryForm" size="small">
              <div style="display: flex">
                <el-form-item label="选择仓库" prop="warehouseCode" style="flex: 1; display: flex">
                  <el-select v-model="forms.warehouseCode" style="width: 280px" @change="selectwarehouse">
                    <el-option v-for="(value, index) in warehouseData" :key="index" :label="value.warehouseName"
                      :value="value.warehouseCode">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="入库时间" prop="inDate" style="flex: 1; display: flex">
                  <el-date-picker style="width: 280px" v-model="forms.inDate" type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
              </div>

              <div style="display: flex">
                <el-form-item label="入库人员" prop="inUserId" style="flex: 1; display: flex">
                  <el-select v-model="forms.inUserId" style="width: 280px;" @change="selectUsers">
                    <el-option v-for="(value, index) in userDatas" :key="index" :label="value.nickName"
                      :value="value.userId">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="入库类型" prop="inType" style="flex: 1; display: flex">
                  <el-select v-model="forms.inType" style="width: 280px;">
                    <el-option v-for="(value, index) in inTypeList" :key="index" :label="value.name" :value="value.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>

              <el-form-item label="备件信息" class="table-form-item">
                <div slot="label" class="star-label">
                  <span class="required-star">*</span> 备件信息
                </div>
                <div class="table-wrapper">
                  <div class="scroll-container" ref="scrollContainer">
                    <el-table :max-height="tableMaxHeight1" stripe :data="tableData" style="width: 1200px">
                      <el-table-column label="序号" width="50" align="center">
                        <template slot-scope="scope">{{
                          scope.$index + 1
                        }}</template>
                      </el-table-column>
                      <el-table-column label="备件名称" min-width="110">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.partName" placeholder="必填" size="small" :class="{
                            'error-border': validateError(
                              scope.row,
                              'partName'
                            ),
                          }"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="编码" min-width="110">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.partCode" placeholder="必填" size="small" :class="{
                            'error-border': validateError(
                              scope.row,
                              'partCode'
                            ),
                          }"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="型号" min-width="110">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.specModel" placeholder="必填" size="small" :class="{
                            'error-border': validateError(
                              scope.row,
                              'specModel'
                            ),
                          }"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="单位" min-width="80">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.unit" placeholder="必填" size="small" :class="{
                            'error-border': validateError(scope.row, 'unit'),
                          }"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="单价/元" min-width="120">
                        <template slot-scope="scope">
                          <el-input-number :class="{
                            'error-border': validateError(
                              scope.row,
                              'unitPrice'
                            ),
                          }" style="width: 100px" :controls="false" v-model="scope.row.unitPrice" :precision="2"
                            :step="0.1" :min="0" step-strictly></el-input-number>
                          <!-- <el-input v-model="scope.row.unitPrice" placeholder="必填"
                                                        size="small" type="number"
                                                        :class="{ 'error-border': validateError(scope.row, 'unitPrice') }"></el-input> -->
                        </template>
                      </el-table-column>
                      <el-table-column label="数量" min-width="120">
                        <template slot-scope="scope">
                          <el-input-number :class="{
                            'error-border': validateError(
                              scope.row,
                              'quantity'
                            ),
                          }" style="width: 100px" :controls="false" v-model="scope.row.quantity" :step="1"
                            step-strictly></el-input-number>
                          <!-- <el-input v-model="scope.row.quantity" placeholder="必填" size="small"
                                                        type="number"
                                                        :class="{ 'error-border': validateError(scope.row, 'quantity') }"></el-input> -->
                        </template>
                      </el-table-column>
                      <el-table-column label="厂家" min-width="100">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.manufacturer" placeholder="必填" size="small" :class="{
                            'error-border': validateError(
                              scope.row,
                              'manufacturer'
                            ),
                          }"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="80" align="center">
                        <template slot-scope="scope">
                          <el-button icon="el-icon-delete" size="mini" type="text"
                            @click="handleDelete(scope.$index, scope.row)" class="delete-btn"></el-button>
                          <el-button icon="el-icon-circle-plus-outline" size="mini" type="text"
                            @click="handleAdd(scope.$index, scope.row)" v-if="scope.$index === tableData.length - 1"
                            class="add-btn"></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 步骤2内容：预览信息 -->
        <div v-if="activeStep === 1" class="preview-container" ref="step1Container">
          <div class="summary-card" ref="summaryCard">
            <div class="summary-row">
              <div class="summary-item">
                <span class="label">仓库：</span>
                <span class="value">{{
                  forms.warehouseName || forms.warehouseCode || "-"
                }}</span>
              </div>
              <div class="summary-item">
                <span class="label">总数量：</span>
                <span class="value">{{ totalQuantity }} 台</span>
              </div>
              <div class="summary-item">
                <span class="label">总金额：</span>
                <span class="value">{{ totalAmount }} 万元</span>
              </div>
            </div>
            <div class="summary-row">
              <div class="summary-item">
                <span class="label">提交人：</span>
                <span class="value">{{ nickName || "-" }}</span>
              </div>
              <div class="summary-item">
                <span class="label">提交时间：</span>
                <span class="value">{{ submitTime || "-" }}</span>
              </div>
            </div>
          </div>
          <div class="inTitle">入库明细：</div>
          <div class="preview-table-container" ref="previewTableContainer">
            <el-table :max-height="tableMaxHeight" stripe :data="tableData" style="width: 100%" ref="previewTable">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column label="备件名称" prop="partName" align="center"></el-table-column>
              <el-table-column label="编码" prop="partCode" align="center"></el-table-column>
              <el-table-column label="型号" prop="specModel" align="center"></el-table-column>
              <el-table-column label="单位" prop="unit" align="center"></el-table-column>
              <el-table-column label="数量" align="center" prop="quantity">
                <template slot-scope="scope">{{
                  Number(scope.row.quantity)
                }}</template>
              </el-table-column>
              <el-table-column label="单价/元" align="center">
                <template slot-scope="scope">{{
                  Number(scope.row.unitPrice)
                }}</template>
              </el-table-column>

              <el-table-column label="总价/元" align="center">
                <template slot-scope="scope">
                  {{
                    Number(scope.row.unitPrice || 0) *
                    Number(scope.row.quantity || 0)
                  }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 步骤3内容：完成页 -->
        <div v-if="activeStep === 2" class="finish-container">
          <div class="finish-content">
            <div class="finishImg">
              <img src="../../assets/images/rkcg.png" alt="成功图标" />
            </div>
            <div class="finishTitle">入库成功</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部按钮栏 -->
    <div class="footer" v-if="activeStep == 0">
      <el-button size="mini" @click="cancelAdd">取消</el-button>
      <el-button type="primary" size="mini" @click="nextStep">下一步</el-button>
    </div>
    <div class="footer" v-if="activeStep == 1">
      <el-button size="mini" @click="prevStep">上一步</el-button>
      <el-button type="primary" size="mini" @click="saveData">保存草稿</el-button>
      <el-button type="primary" size="mini" @click="submitData">提交</el-button>
    </div>
    <div class="footer" v-if="activeStep == 2">
      <el-button size="mini" @click="cancelAdd">返回列表</el-button>
      <el-button type="primary" size="mini" @click="againData">再次新建</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { warehouseLists, userList } from "@/api/select.js";
import {
  addoutPut,
  submitoutPut,
  getoutPut,
  updateoutPut,
} from "@/api/deviceIn.js";
export default {
  name: "adddeviceInfo",

  data() {
    const now = new Date();
    const y = now.getFullYear();
    const m = String(now.getMonth() + 1).padStart(2, '0');
    const d = String(now.getDate()).padStart(2, '0');
    const H = String(now.getHours()).padStart(2, '0');
    const M = String(now.getMinutes()).padStart(2, '0');
    const S = String(now.getSeconds()).padStart(2, '0');
    const defaultTime = `${y}-${m}-${d} ${H}:${M}:${S}`;
    return {
      inTypeList: [
        {
          id: 0,
          name: '采购'
        },
        {
          id: 1,
          name: '退库'
        }
      ],
      type: "add",
      userDatas: [],
      tableMaxHeight1: 400,
      tableMaxHeight: 400, // 默认高度
      tableHeight: null, // 新增表格高度数据
      warehouseData: [],
      tableData: [
        {
          id: null,
          partName: "",
          partCode: "",
          specModel: "",
          unit: "",
          unitPrice: 0,
          quantity: 0,
          manufacturer: "",
        },
      ],
      requiredFields: [
        "partName",
        "partCode",
        "specModel",
        "unit",
        "unitPrice",
        "quantity",
        "manufacturer",
      ],
      errorRows: new Set(),
      rules: {
        inType: [
          { required: true, message: "入库类型不能为空", trigger: "blur" },
        ],
        inDate: [
          { required: true, message: "入库时间不能为空", trigger: "blur" },
        ],
        inUserId: [
          { required: true, message: "入库人员不能为空", trigger: "blur" },
        ],
        warehouseCode: [
          { required: true, message: "仓库编码不能为空", trigger: "blur" },
        ],
      },
      forms: {
        inDate: defaultTime,
        warehouseId: null,
        warehouseName: "",
        warehouseCode: "",
      },
      activeStep: 0,
      footerHeight: 70,
      submitterName: "张红丽",
      submitTime: "",
      stockInId: "",
    };
  },

  computed: {
    ...mapGetters(["nickName"]),
    totalQuantity() {
      return this.tableData.reduce((sum, row) => {
        const qty = Number(row.quantity) || 0;
        return sum + qty;
      }, 0);
    },
    totalAmount() {
      const totalYuan = this.tableData.reduce((sum, row) => {
        const price = Number(row.unitPrice) || 0;
        const qty = Number(row.quantity) || 0;
        return sum + price * qty;
      }, 0);
      console.log(totalYuan / 10000);
      return totalYuan / 10000;
    },
  },
  watch: {
    activeStep() {
      this.$nextTick(this.calculateTableHeight);
    },
    tableData: {
      deep: true,
      handler() {
        this.errorRows.clear();
      },
    },
  },
  mounted() {
    this.calculateTableHeight();
    window.addEventListener("resize", this.debouncedResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.debouncedResize);
  },
  created() {
    this.loadWarehouseData();
    this.getUserData();
    this.type = this.$route.query.type;
    this.stockInId = this.$route.query.stockInId;
    if (this.type == "edit" && this.stockInId) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      getoutPut(this.stockInId).then((res) => {
        this.forms = res.data;
        this.tableData = res.data.stockInDetails;
      });
    },
    againData() {
      this.tableData = [];
      this.forms = {
        inUserId: undefined,
        warehouseId: undefined,
      };
      this.activeStep = 0;
    },
    debouncedResize: _.debounce(function () {
      this.calculateTableHeight();
    }, 200),
    getUserData() {
      userList()
        .then((res) => {
          this.userDatas = res.rows || [];
        })
        .catch((err) => {
          this.$message.error("加载人员数据失败");
          console.error(err);
        });
    },
    loadWarehouseData() {
      warehouseLists()
        .then((res) => {
          this.warehouseData = res.rows || [];
          if (this.warehouseData.length == 1) {
            this.forms.warehouseCode = this.warehouseData[0].warehouseCode
          }
        })
        .catch((err) => {
          this.$message.error("加载仓库数据失败");
          console.error(err);
        });
    },
    cancelAdd() {
      this.$router.go(-1);
      // this.$router.push({ path: '/deviceIn' });
    },
    nextStep() {
      if (!this.forms.warehouseCode) {
        this.$message.error("请选择仓库");
        return;
      }
      if (!this.forms.inUserId) {
        this.$message.error("请选择入库人员");
        return;
      }

      let isValid = true;
      this.errorRows.clear();
      this.tableData.forEach((row) => {
        this.requiredFields.forEach((field) => {
          if (
            row[field] === null ||
            row[field] === undefined ||
            row[field] === ""
          ) {
            isValid = false;
            this.errorRows.add(row);
          }
        });
      });

      if (!isValid) {
        this.$message.error("请填写所有必填项");
        this.scrollToError();
        return;
      }

      if (this.activeStep < 2) {
        this.activeStep++;

        // 获取当前时间
        const now = new Date();

        // 获取各个时间部分
        const year = now.getFullYear(); // 年
        const month = now.getMonth() + 1; // 月 (0-11，所以要+1)
        const day = now.getDate(); // 日
        const hours = now.getHours(); // 时
        const minutes = now.getMinutes(); // 分
        const seconds = now.getSeconds(); // 秒

        // 格式化为两位数显示
        const padZero = (num) => (num < 10 ? `0${num}` : num);

        // 组合成完整的时间字符串
        const dateTimeStr = `${year}-${padZero(month)}-${padZero(
          day
        )} ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
        console.log(dateTimeStr); // 例如: "2023-05-15 14:30:45"
        this.submitTime = dateTimeStr;
      }
    },
    saveData() {
      this.forms.stockInDetails = this.tableData.map((item) => ({
        ...item,
        totalPrice: Number(item.unitPrice) * Number(item.quantity),
      }));
      this.forms.totalAmount = Number(this.totalAmount) * 10000;
      this.forms.submitDate = this.submitTime;
      this.forms.submitUserName = this.nickName;
      this.forms.status = 2;
      if (this.type == "add") {
        addoutPut(this.forms).then((res) => {
          this.$message.success("保存成功");
          setTimeout(() => {
            this.cancelAdd();
          }, 1000);
        });
      } else {
        updateoutPut(this.forms).then((res) => {
          this.$message.success("保存成功");
          setTimeout(() => {
            this.cancelAdd();
          }, 1000);
        });
      }
    },
    submitData() {
      this.forms.stockInDetails = this.tableData.map((item) => ({
        ...item,
        totalPrice: Number(item.unitPrice) * Number(item.quantity),
      }));
      this.forms.totalAmount = Number(this.totalAmount) * 10000;
      this.forms.submitDate = this.submitTime;
      this.forms.submitUserName = this.nickName;
      this.forms.status = 1;
      submitoutPut(this.forms).then((res) => {
        this.$message.success("提交成功");
        setTimeout(() => {
          if (this.activeStep < 2) {
            this.activeStep++;
          }
        }, 1000);
      });
    },
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    },
    // calculateTableHeight() {
    //     const container = this.$el.querySelector('.container');
    //     const steps = this.$el.querySelector('.steps-container');
    //     const footer = this.$el.querySelector('.footer');
    //     if (!container || !steps || !footer) return;

    //     const containerHeight = container.clientHeight;
    //     const stepsHeight = steps.offsetHeight;
    //     const footerHeight = footer.offsetHeight;
    //     const padding = 90;

    //     const scrollContainer = this.$refs.scrollContainer;
    //     if (scrollContainer && this.activeStep === 0) {
    //         const maxHeight = containerHeight - stepsHeight - footerHeight - padding;
    //         scrollContainer.style.maxHeight = `${Math.max(maxHeight, 200)}px`;
    //     }
    // },
    calculateTableHeight() {
      // 步骤0的计算保持不变
      if (this.activeStep === 0) {
        const container = this.$el.querySelector(".container");
        const steps = this.$el.querySelector(".steps-container");
        const footer = this.$el.querySelector(".footer");
        if (!container || !steps || !footer) return;

        const containerHeight = container.clientHeight;
        const stepsHeight = steps.offsetHeight;
        const footerHeight = footer.offsetHeight;
        const padding = 180;

        const scrollContainer = this.$refs.scrollContainer;
        if (scrollContainer) {
          const maxHeight =
            containerHeight - stepsHeight - footerHeight - padding;
          // scrollContainer.style.maxHeight = `${Math.max(maxHeight, 200)}px`;
          this.tableMaxHeight1 = `${Math.max(maxHeight, 200)}px`;
        }
      }

      // 步骤1的高度计算（采用与步骤0相同的滚动方式）
      if (this.activeStep === 1) {
        this.$nextTick(() => {
          const container = this.$refs.step1Container;
          const summaryCard = this.$refs.summaryCard;

          if (!container || !summaryCard) return;

          // 获取容器总高度
          const containerHeight = container.clientHeight;

          // 计算其他元素占据的高度
          const summaryHeight = summaryCard.offsetHeight;
          const titleHeight = 110; // 标题高度
          const margins = 32; // 各种间距总和

          // 计算表格可用高度
          this.tableMaxHeight =
            containerHeight - summaryHeight - titleHeight - margins;

          // 强制ElTable重新计算布局
          if (this.$refs.previewTable) {
            this.$refs.previewTable.doLayout();
          }
        });
      }
    },
    scrollToPreviewTableTop() {
      const tableContainer = this.$refs.previewTableContainer;
      if (tableContainer) {
        tableContainer.scrollTop = 0;
      }
    },
    scrollToError() {
      const scrollContainer = this.$refs.scrollContainer;
      if (scrollContainer) {
        scrollContainer.scrollTop = 0;
      }
    },
    selectUsers(e) {
      const selected = this.userDatas.find((item) => item.userId === e);
      if (selected) {
        this.forms.inUserId = e;
        this.forms.inUserDeptId = selected.deptId;
        this.forms.inUserName = selected.nickName;
      }
    },
    selectwarehouse(e) {
      const selected = this.warehouseData.find(
        (item) => item.warehouseCode === e
      );
      if (selected) {
        this.forms.warehouseName = selected.warehouseName;
      }
    },
    handleAdd(index, row) {
      console.log(this.tableData, "validateRow");
      if (!this.validateRow(row)) {
        this.$message.warning("当前行信息未填写完整，请补充后再添加");
        return;
      }

      this.tableData.push({
        id: null,
        partName: "",
        partCode: "",
        specModel: "",
        unit: "",
        unitPrice: 0,
        quantity: 0,
        manufacturer: "",
      });
      this.$nextTick(() => this.calculateTableHeight());
    },
    handleDelete(index, row) {
      if (this.tableData.length <= 1) {
        this.$message.warning("至少保留一行数据");
        return;
      }

      if (!row.id) {
        this.tableData.splice(index, 1);
        this.$nextTick(() => this.calculateTableHeight());
        return;
      }

      this.$confirm("确定删除这条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message.success("删除成功");
          this.$nextTick(() => this.calculateTableHeight());
        })
        .catch(() => { });
    },
    validateRow(row) {
      return this.requiredFields.every((field) => {
        return (
          row[field] !== null && row[field] !== undefined && row[field] !== ""
        );
      });
    },
    validateError(row, field) {
      return (
        this.errorRows.has(row) &&
        (row[field] === null || row[field] === undefined || row[field] === "")
      );
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 10px;
  background-color: #f5f7fa;
  position: relative;
}

.top {
  width: 100%;
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  >div:first-child {
    width: 24px;
    height: 24px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  >div:last-child {
    font-family: PingFang SC;
    margin-left: 8px;
    font-weight: 500;
    font-size: 18px;
    color: #1d2129;
    line-height: 24px;
  }
}

.container {
  width: 100%;
  margin-top: 16px;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
  border-radius: 4px;
}

.steps-center-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 40px;
}

.steps-container {
  padding: 6px 0;
  width: auto;
}

.step-bar {
  display: flex;
  align-items: center;
  width: 100%;
}

.step-item {
  display: flex;
  align-items: center;
  position: relative;

  .step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    margin-top: -4px;
    border: 1px solid #e5e9f2;
    background: #fff;
    color: #8392a5;
  }

  .step-text {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
  }

  .step-title {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #1d2129;
  }

  .step-desc {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #86909c;
  }

  .step-line {
    height: 2px;
    margin: 0 12px;
    background: #e5e9f2;
    flex: 1;
    min-width: 80px;
  }

  &.last .step-line {
    display: none;
  }

  .active {
    background: #00b42a !important;
    color: #fff !important;
    border-color: #00b42a !important;
  }

  .finished {
    background: #f0f9eb !important;
    border-color: #00b42a !important;
    color: #00b42a !important;
  }

  // .finished-line {
  //     background: #00b42a !important;
  // }

  // &:nth-child(1) .step-title {
  //     color: #00b42a !important;
  // }
}

// 步骤1表单居中修复
.form-center-container {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  /* 不再居中，改为左偏移 */
  justify-content: flex-start;
  padding-left: 60px;
  /* 与步骤1图标左侧对齐 */
}

// 新增居中容器样式
.form-container-center {
  width: 1000px;
  /* 固定宽度，适配表格 */
  flex-shrink: 0;
}

.preview-container,
.finish-container {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.table-form-item {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 0;
  align-items: flex-start;
  padding-top: 5px;
}

.table-wrapper {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #e5e9f2;
  border-radius: 4px;
  transition: max-height 0.2s ease;
  width: 100%;
}

.star-label {
  display: flex;
  align-items: center;
  width: 80px;
}

::v-deep .el-table {
  width: 100%;

  .el-table__header th .cell::before {
    content: none;
  }

  .form-center-container & .el-table__header th .cell::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }

  .el-table__header th:first-child .cell::before {
    content: none !important;
  }

  th,
  td {
    padding: 8px 0;
    height: auto;
  }
}

::v-deep .el-table__header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

.error-border {
  border-color: #f56c6c !important;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-2px);
  }

  40%,
  80% {
    transform: translateX(2px);
  }
}

.preview-container {
  width: 100%;
  padding: 0 20px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-card {
  width: 100%;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 16px 40px;
}

.star-label {
  display: flex;
  align-items: center;
}

.required-star {
  color: #f56c6c;
  margin-right: 4px;
}

.summary-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.summary-item {
  display: flex;
  align-items: center;
  min-width: 200px;

  .label {
    color: #4e5969;
    font-size: 14px;
    margin-right: 8px;
  }

  .value {
    color: #1d2129;
    font-weight: 500;
    font-size: 14px;
  }
}

::v-deep .el-form-item__label {
  width: 80px !important;
  padding-left: 0;
  text-align: left;
}

.preview-table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  ::v-deep .el-table {
    min-width: 800px;
  }

  .inTitle {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #1d252f;
  }
}

.finish-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* 或指定具体高度如 300px */
  width: 100%;
  text-align: center;
  margin-bottom: 70px;
}

.success-icon {
  font-size: 64px;
  color: #00b42a;
  margin-bottom: 16px;
}

.success-text {
  font-size: 24px;
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 8px;
}

.success-desc {
  font-size: 14px;
  color: #4e5969;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0px;
  right: 0;
  height: 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px -3px 10px 0px rgba(149, 160, 171, 0.1);
  z-index: 10;
}

::v-deep .scroll-container::-webkit-scrollbar {
  width: 6px;
}

::v-deep .scroll-container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

::v-deep .scroll-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

::v-deep .scroll-container::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

.finishImg img {
  width: 66px;
  /* 根据需要调整图标大小 */
  height: 66px;
}

.finishTitle {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 22px;
  letter-spacing: 0%;
  margin-top: 16px;
  vertical-align: middle;
  color: #1d2129;
}

.container {
  width: 100%;
  margin-top: 16px;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
  border-radius: 4px;
}

/* 修改步骤条容器样式 */
.steps-center-container {
  width: 100%;
  margin-bottom: 40px;

  /* 默认不居中，与表单左对齐 */
  .steps-container {
    width: 600px;
    /* 与表单同宽 */
    margin: 0 auto;
    padding: 6px 0;
  }

  .initial-step {
    margin-left: 60px;
    /* 明确初始步骤样式 */
  }

  /* 当activeStep不为0时居中 */
  &.center-steps {
    display: flex;
    justify-content: center;

    .steps-container {
      width: auto;
      /* 取消固定宽度 */
    }
  }
}

/* 表单容器样式保持不变 */
.form-center-container {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
}


/* 确保表单元素对齐 */
.el-form-item {

  .el-select,
  .el-date-picker {
    width: 280px !important;
  }
}

/* 表格容器宽度与表单一致 */
.table-wrapper {
  width: 900px;
}


/* 向右偏移量，随时可调 */
::v-deep .offset-right {
  justify-content: flex-start !important;
  /* 取消居中 */
  padding-left: calc((100% - 690px) / 2);
  /* 与步骤 1 图标左侧对齐 */
}

.summary-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;

  /* 每列固定宽度，保证上下行对齐 */
  .summary-item {
    flex: 0 0 32%;
    /* 约 1/3，留 1% 容差 */
    max-width: 32%;
    display: flex;
    align-items: center;
  }
}

/* 空列占位，让最后一行也能左对齐 */
.summary-row::after {
  content: '';
  flex: 0 0 32%;
  max-width: 32%;
}
</style>